<!doctype html>
<html>
  <head>
    <title>Brander Setup</title>
    
    <style type='text/css'>
      .loader {
        display: block;
        width: 1024px;
        height: 768px;
        border: none;
      }
    </style> 

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="foundation/css/foundation.css" />
    <script src="foundation/js/vendor/modernizr.js"></script>
  </head>
  <body>

  <!-- Navigation -->

  <!-- end Navigation -->
    <div class='row'>
      <div class='large-12 columns'>
          <h1>Brander Thing</h1>
          <a name='mtop'></a>
          <a href='#mlogin'>login</a> | <a href='#mregistration'>registration</a> |  <a href='#mdashboard'>dashboard</a>
      </div>
    </div>
    <div class="row">
      <div class="large-8 columns">
        <div id='loader'>
          <a name='mlogin'></a>
          <h3>Login</h3>
            <div class='menu'>
              bgimage: <input type='textbox' placeholder='https://school.edu/someimage.png' name='login_bg_image' id='login_bg_image'/>
              <br/>bg height: <input type='textbox' placeholder='eg 10px' name='login_bg_height' id='login_bg_height'/>
              <br/>bg position y: <input type='textbox' placeholder='eg 0px' name='login_bg_position_y' id='login_bg_position_y'/>
              <br/>bg color: <input type='textbox' placeholder='eg #fff or white' name='login_bg_color' id='login_bg_color'/>
              <br/>text color: <input type='textbox' placeholder='eg #000' name='login_text_color' id='login_text_color'/>
              <br/>link color: <input type='textbox' placeholder='eg #ffrr44' name='login_link_color' id='login_link_color'/>
              <p>Buttons</p>
              <br/>button up color: <input type='textbox' placeholder='eg #fff or blue or rgb(23 23 32)' name='button_up_color' id='button_up_color'/>
              <br/>button hover color: <input type='textbox' placeholder='eg #fff or blue or rgb(1 2 3)' name='button_hover_color' id='button_hover_color'/>

            </div>  

            <iframe id='login' src='login.html' class='loader'></iframe>

            <a name='mregistration'></a> <a href='#top' class='top'>top</a>
          <h3>Registration</h3>
            <iframe id='register' src='register.html' class='loader'></iframe>

            <a name='mdashboard'></a> <a href='#top' class='top'>top</a>
          <h3>Dashboard</h3>

            <div class='menu'>
              header bg image : <input type='textbox' placeholder='eg https://domain.com/headerimage.png' name='header_bg_image' id='header_bg_image'/>
              <br/>header bg color: <input type='textbox' placeholder='eg #hhggff' name='header_bg_color' id='header_bg_color'/>
              <br/>header border bottom : <input type='textbox' placeholder='eg 1px solid gray' name='header_border_bottom' id='header_border_bottom'/>
              <br/>header logo: <input type='textbox' placeholder='eg https://domain.com/headerlogo.png' name='header_logo' id='header_logo'/>
              <br/>header logo size: <input type='textbox' placeholder='eg 291px 72px' name='header_logo_size' id='header_logo_size'/>
              <!--<br/>header logo bottom: <input type='textbox' placeholder='eg 2px' name='header_logo_bottom' id='header_logo_bottom'/>-->
              <br/>header logo top: <input type='textbox' placeholder='eg 0px' name='header_logo_top' id='header_logo_top'/>
              <br/> header logo height: <input type='textbox' placeholder='eg 72px' name='header_logo_height' id='header_logo_height'/>
              <br/> header height: <input type='range' value='0' min="30" max="200" placeholder='eg 72px' name='header_height' id='header_height'/><span id='header_height_val'></span>
              <br/>header menu left margin: <input type='range' min='20' max='400'
              value='' id='header_menu_left_margin' placeholder='eg 291px' name='header_menu_left_margin'/><span id='header_menu_left_margin_value'></span>
              <br/>header menu top padding: <input type='range' min='1' max='100'
              value='0' placeholder='eg 20px' name='header_menu_top_padding' id='header_menu_top_padding'/><span id='header_menu_top_padding_value'></span>
              <br/>header menu text color: <input type='textbox' value=''
              id='header_menu_text_color' placeholder='eg #fff' name='header_menu_text_color'/>
              <br/>header menu text shadow: <input type='textbox' value=''
              id='header_menu_text_shadow' placeholder='eg none' name='header_menu_text_shadow'/>
              <br/>header logo secondary image: <input type='textbox' placeholder='eg none' name='header_logo_secondary' id='header_logo_secondary'/>
            </div>
            <iframe id='dashboard' src='dashboard.html' class='loader'></iframe>
        </div>
      </div>
      <div class='large-4 columns'>
        <pre id='css'></pre>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/main.js"></script>

    <script src="foundation/js/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>
